﻿<common:LayoutAwarePage x:Class="Mutzl.Samples.VideoApp.YouTube.View.DetailView"
                        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                        xmlns:common="using:Mutzl.Samples.VideoApp.Common"
                        xmlns:converters="using:Callisto.Converters"
                        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                        xmlns:mmppf="using:Microsoft.PlayerFramework"
                        x:Name="PageRoot"
                        DataContext="{Binding Detail,
                                              Source={StaticResource YouTubeLocator}}"
                        mc:Ignorable="d">

    <common:LayoutAwarePage.Resources>

        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="ms-appx:///Microsoft.PlayerFramework/themes/EntertainmentTheme.xaml" />
            </ResourceDictionary.MergedDictionaries>
            <converters:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
        </ResourceDictionary>

    </common:LayoutAwarePage.Resources>

    <common:LayoutAwarePage.TopAppBar>
        <AppBar Visibility="{Binding IsFullScreen, Converter={StaticResource BooleanToVisibilityConverter}}">
            <Button Margin="30 0 0 0"
                    VerticalAlignment="Center"
                    Click="GoBack"
                    IsEnabled="{Binding Frame.CanGoBack,
                                        ElementName=PageRoot}"
                    Style="{StaticResource BackButtonStyle}" />
        </AppBar>
    </common:LayoutAwarePage.TopAppBar>

    <common:LayoutAwarePage.BottomAppBar>
        <AppBar>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <StackPanel Orientation="Horizontal" />
                <StackPanel Grid.Column="1"
                            HorizontalAlignment="Right"
                            Orientation="Horizontal">

                    <mmppf:MuteButton x:Name="MuteButton"
                                      Style="{StaticResource AppBarButtonStyle}"
                                      ViewModel="{Binding InteractiveViewModel,
                                                          ElementName=videoPlayer}" />

                    <!--
                        <mmppf:SignalStrength Margin="20"
                        Visibility="{Binding IsSmoothStreaming,
                        Converter={StaticResource BooleanToVisibilityConverter}}"
                        Value="{Binding ElementName=videoPlayer,
                        Path=SignalStrength}" />
                    -->
                    <mmppf:ReplayButton x:Name="ReplayButton"
                                        Style="{StaticResource AppBarButtonStyle}"
                                        ViewModel="{Binding InteractiveViewModel,
                                                            ElementName=videoPlayer}" />
                    <mmppf:FullScreenButton x:Name="FullScreenButton"
                                            Style="{StaticResource AppBarButtonStyle}"
                                            ViewModel="{Binding InteractiveViewModel,
                                                                ElementName=videoPlayer}" />

                </StackPanel>

            </Grid>
        </AppBar>
    </common:LayoutAwarePage.BottomAppBar>


    <Grid Background="Black" Style="{StaticResource LayoutRootStyle}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="9*" />
            <ColumnDefinition Width="4*" />
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition Height="140" />
            <RowDefinition Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>

        <Image x:Name="image"
               Grid.RowSpan="3"
               Grid.ColumnSpan="2"
               Source="ms-appx:///Assets/background.png"
               Stretch="UniformToFill" />

        <!--  Back button and page title  -->
        <Grid x:Name="grid" Grid.ColumnSpan="2">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Button x:Name="backButton"
                    Margin="36,0,0,36"
                    Click="GoBack"
                    IsEnabled="{Binding Frame.CanGoBack,
                                        ElementName=PageRoot}"
                    Style="{StaticResource BackButtonStyle}" />
            <TextBlock x:Name="pageTitle"
                       Grid.Column="1"
                       Height="40"
                       Margin="20,0,5,40"
                       IsHitTestVisible="false"
                       Style="{StaticResource PageHeaderTextStyle}"
                       Text="{Binding Video.Title}" />
        </Grid>



        <!--  Player  -->
        <mmppf:MediaPlayer x:Name="videoPlayer"
                           Grid.Row="1"
                           MinHeight="100"
                           Margin="104,30,0,30"
                           VerticalAlignment="Center"
                           Background="Black"
                           IsFullScreen="{Binding IsFullScreen,
                                                  Mode=TwoWay}"
                           MediaEnded="VideoPlayer_OnMediaEnded"
                           PosterSource="{Binding Video.PosterPath}"
                           Source="{Binding VideoUri}" />
        <Grid x:Name="InfoPanel"
              Grid.Row="1"
              Grid.RowSpan="2"
              Grid.Column="1"
              Margin="30,30,30,0"
              Background="#7F000000">
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <ScrollViewer VerticalScrollBarVisibility="Auto">
                <TextBlock FontSize="24"
                           Padding="20,0"
                           Style="{StaticResource BasicTextStyle}"
                           Text="{Binding Video.Description}"
                           TextTrimming="None"
                           TextWrapping="Wrap" />
            </ScrollViewer>
            <TextBlock Grid.Row="1"
                       FontSize="24"
                       Padding="20"
                       Style="{StaticResource BasicTextStyle}"
                       Text="{Binding Duration}"
                       TextTrimming="None"
                       TextWrapping="Wrap" />
            <TextBlock Grid.Row="2"
                       FontSize="24"
                       Padding="20,0,20,20"
                       Style="{StaticResource BasicTextStyle}"
                       Text="{Binding Date}"
                       TextTrimming="None"
                       TextWrapping="Wrap" />
        </Grid>


        <VisualStateManager.VisualStateGroups>

            <!--  Visual states reflect the application's view state  -->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="FullScreenLandscape" />
                <VisualState x:Name="Filled" />

                <!--  The back button respects the narrower 100-pixel margin convention for portrait  -->
                <VisualState x:Name="FullScreenPortrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InfoPanel" Storyboard.TargetProperty="(FrameworkElement.Margin)">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Thickness>36,0</Thickness>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="videoPlayer" Storyboard.TargetProperty="(Grid.ColumnSpan)">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Int32>2</x:Int32>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="videoPlayer" Storyboard.TargetProperty="(FrameworkElement.Margin)">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Thickness>36,30</Thickness>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InfoPanel" Storyboard.TargetProperty="(Grid.Column)">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Int32>0</x:Int32>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InfoPanel" Storyboard.TargetProperty="(Grid.ColumnSpan)">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Int32>2</x:Int32>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InfoPanel" Storyboard.TargetProperty="(Grid.Row)">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Int32>2</x:Int32>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InfoPanel" Storyboard.TargetProperty="(Grid.RowSpan)">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Int32>1</x:Int32>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!--  The back button and title have different styles when snapped  -->
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InfoPanel" Storyboard.TargetProperty="(FrameworkElement.Margin)">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Thickness>0</Thickness>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="videoPlayer" Storyboard.TargetProperty="(Grid.ColumnSpan)">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Int32>2</x:Int32>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="videoPlayer" Storyboard.TargetProperty="(FrameworkElement.Margin)">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Thickness>0,30</Thickness>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InfoPanel" Storyboard.TargetProperty="(Grid.Column)">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Int32>0</x:Int32>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InfoPanel" Storyboard.TargetProperty="(Grid.ColumnSpan)">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Int32>2</x:Int32>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InfoPanel" Storyboard.TargetProperty="(Grid.Row)">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Int32>2</x:Int32>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InfoPanel" Storyboard.TargetProperty="(Grid.RowSpan)">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Int32>1</x:Int32>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
            <VisualStateGroup x:Name="PlayerState">
                <VisualState x:Name="Normal" />
                <VisualState x:Name="Fullscreen">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="videoPlayer" Storyboard.TargetProperty="(Grid.Row)">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Int32>0</x:Int32>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="videoPlayer" Storyboard.TargetProperty="(Grid.RowSpan)">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Int32>3</x:Int32>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="videoPlayer" Storyboard.TargetProperty="(Grid.ColumnSpan)">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Int32>2</x:Int32>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InfoPanel" Storyboard.TargetProperty="(UIElement.Visibility)">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Collapsed</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="grid" Storyboard.TargetProperty="(UIElement.Visibility)">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Collapsed</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="videoPlayer" Storyboard.TargetProperty="(FrameworkElement.Margin)">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Thickness>0</Thickness>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.Visibility)">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Collapsed</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</common:LayoutAwarePage>
